<oem-header-nav
  _COMPONENT_NAME_ATTR_="{{section_id}}"
  class="h-full flex w-full items-center {{class}}"
>
  <ul class="inline-flex flex-wrap">
    {% if header_nav.size > 0 %}
      {% for item in header_nav.nav_item %}
        <li class="text-base oem-nav-parent-item flex-shrink-0 {% if item.children[0].children %}oem-nav-megamenu{% endif %}">
          <div class="py-3 flex items-center oem-nav-parent-item-label cursor-pointer">
            {% include 'basic/nav_a', class: 'oem-nav-li-a', nav: item %}
            {% if item.children %}
              <svg
                aria-hidden="true"
                focusable="false"
                role="presentation"
                width="12px"
                height="12px"
                style="margin-left:6px"
                viewBox="0 0 10 6"
              >
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
                </path>
              </svg>
            {% endif %}
          </div>
          {% if item.children %}
            <div class="oem-nav-child oem-nav-child-container_wrapper">
              <div class="oem-nav-child-body gap-5 flex flex-col">
                {% for el in item.children %}
                  <dl class="">
                    <dt class="text-base">
                      {% include 'basic/nav_a', class: 'oem-nav-li-a', nav: el %}
                    </dt>
                    {% for ddItem in el.children %}
                      <dd class="opacity-60">
                        {% include 'basic/nav_a', class: 'oem-nav-li-a', nav: ddItem %}
                      </dd>
                    {% endfor %}
                  </dl>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        </li>
      {% endfor %}

    {% else %}
      {% assign beatles = 'Home, New, Tops, Dresses' | split: ', ' %}
      {% for item in beatles %}
        <li class="text-base oem-nav-parent-item ">
          <div class="py-3 flex items-center cursor-pointer">
            <a class="oem-nav-li-a" href="/">{{ item }}</a>
          </div>
        </li>
      {% endfor %}
    {% endif %}

    {% if section_settings.is_more %}
      <li class="text-base oem-nav-parent-item more-menu flex-shrink-0">
        <div class="py-3 flex items-center cursor-pointer">
          <a class="oem-nav-li-a " href="javascript:;">more_link</a>
        </div>
        <div class="oem-nav-child oem-nav-child-container_wrapper">
          <div class="oem-nav-child-body">
            <div class="flex gap-3 w-full more-menu-body">
              <ul class="more-menu-ul"></ul>
            </div>
          </div>
        </div>
      </li>
    {% endif %}
  </ul>
</oem-header-nav>

{% if section_settings.is_more %}
  <script>
    $(function () {
      $.componentHandle(_COMPONENT_NAME_, { id: '{{section_id}}' });
    });
  </script>
{% endif %}
